
//全局颜色变量
$blue: #4785f9;       //主色调 蓝色
$lightblue: #a3c2fc;  //浅蓝色
$green: #38c254;      //绿色
$pink: #feabb5;       //粉色

$black: #212022;      //黑色文字
$gray: #83848e;       //灰色文字
$lightgray: #b3b5b7;  //浅灰色文字

$linecolor: #e3e8ee;  //边框线条灰色

$mblue: #78AAFF;      //深蓝背景
$bgblue: #f4f8ff;     //蓝色背景色
$bggray: #f8f8f8;     //灰色背景色



/*   快速查找索引(字母顺序):
 *
 *      background       ----   背景图片
 *      opacity          ----   透明度
 *      text-ellipsis    ----   单行文本超出自动省略
 *
 *
 *
*/



//---background---
/*
 * background-size的默认值是100% 100% ,background-position的默认值是 0 0 ;
 * ====!!!---图片路径参数 切记要用单引号---!!!====

 * 此处可以传参数的个数为:
 *     1个参数: 即只用传 图片路径,其他默认
 *                  eg: @include background('images/logo.png')
 *
 *     2个参数: 即只用传 图片路径, size值为cover或者contain
 *                  eg: @include background('images/logo.png',cover)
 *
 *     3个参数: 即只用传 图片路径, size宽高值为 两个数值或百分比
 *                  eg: @include background('images/logo.png',40px,40px)
 *
 *     4个参数: 即只用传 图片路径, size宽高值为 两个数值或百分比, position只传水平位置(X轴)的值
 *                  eg: @include background('images/logo.png',40px,40px,center)
 *
 *     5个参数: eg: @include background('images/logo.png',40px,40px,center,top)
 *
 */

@mixin background($imgSrc,$width: 100%,$height: 100%,$posX: 0,$posY: 0) {
  background-image: url($imgSrc);
  background-image: none\0;
  background-repeat: no-repeat;
  background-position: $posX $posY;
  //当background-size是cover或contain时,第三个参数传''即可;如eg: @include background('images/logo.png',cover,'',center,top)
  @if $width == cover or $width == contain {
    background-size: $width;
  } @else {
    background-size: $width $height;
  }
  /*-For-IE8-*/
  filter: unquote("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=") + $imgSrc + unquote(",sizingMethod=scale)");
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+ $imgSrc +",sizingMethod=scale)";
}

@mixin sprite-down-arrow($img,$posX,$posY){
  @include background($img,auto,auto,$posX,$posY)
}

//---opacity---
/*
 *     支持单个参数,数值在 0-1 之间;
*/
@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: alpha(opacity=$opacity-ie);
}

//---单行文本不换行---
/*
 *     支持参数,宽度的百分比值,默认100%;
*/
@mixin text-ellipsis($width:100%) {
  width: $width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@mixin behavior($url){
  background:url($url) no-repeat center;
  -ms-behavior: url(/iscripts/libs/ie8/backgroundsize.min.htc);
  behavior: url(/iscripts/libs/ie8/backgroundsize.min.htc);
}

//现在UI设计的字体大小和行高要一样，我嫌麻烦，谢了这个方法
@mixin font($size){
  font-size:$size;
  line-height:$size;
}

@mixin hover($speed){
  -webkit-transition: all $speed cubic-bezier(.4,.5,.5,.4);
  transition: all $speed cubic-bezier(.4,.5,.5,.4);
}